<template>
  <div id="home">
    <page-layout>
      <marquee :lists="state.depts"></marquee>
      <a-carousel arrows autoplay>
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <left-circle-outlined/>
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px">
            <right-circle-outlined/>
          </div>
        </template>
        <div v-for="(banner,index) in bannerList" :key="index">
          <img :src="banner" class="imgCssClass" alt>
        </div>
      </a-carousel>
      <a-row :gutter="[10, 10]">

        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-card>
            <pro-count
              startVal="10"
              :endVal = loginChats
              decimals="0"
              speed="300"
            />
            <a-progress
              :show-info="false"
              style="margin-top: 16px"
              :percent="30"
              size="small"
              :stroke-color="{ '0%': color,'100%': color}"
            />
            <a-divider/>
            <div class="card-left">登陆人数</div>
            <div class="card-right">{{loginChats}} 人</div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-card>
            <pro-count
              startVal="4500"
              :endVal= registerCount
              decimals="0"
              speed="300"
            />
            <a-progress
              style="margin-top: 16px"
              :percent="50"
              size="small"
              status="active"
              :show-info="false"
              :stroke-color="{ '0%': color,'100%': color}"
            />
            <a-divider/>
            <div class="card-left">注册人数</div>
            <div class="card-right">{{ registerCount }}人</div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-card>
            <pro-count
              startVal="6500"
              :endVal="visitCount"
              decimals="0"
              speed="300"
            />
            <a-progress
              :show-info="false"
              style="margin-top: 16px"
              :percent="30"
              size="small"
              :stroke-color="{ '0%': color,'100%': color}"
            />
            <a-divider/>
            <div class="card-left">实验人数</div>
            <div class="card-right">{{ visitCount }}人</div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <a-card>
            <pro-count
              startVal="4000"
              :endVal="trainingClass"
              decimals="1"
              speed="300"
            />
            <a-progress
              style="margin-top: 16px"
              :percent="50"
              size="small"
              status="active"
              :show-info="false"
              :stroke-color="{ '0%': color,'100%': color}"
            />
            <a-divider/>
            <div class="card-left">实训课时</div>
            <div class="card-right">{{ trainingClass }}分</div>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card>
            <a-tabs>
              <a-tab-pane key="1" tab="实训项目访问次数">
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container"></div>
                  </a-col>
                  <a-col
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="{ span: 7, offset: 1 }"
                    :xl="{ span: 7, offset: 1 }"
                  >
                    <template v-for="(item , index) in statisticsVOS_side" :key="index">
                      <a-row style="margin: 22px">
                        <a-col span="2">
                          <div>{{index+1}}</div>
                        </a-col>
                        <a-col span="18">{{item.name}}</a-col>
                        <a-col span="4">{{item.count}}</a-col>
                      </a-row>
                    </template>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="2" tab="实训平均分" style="margin-left: 15%"  force-render>
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container1"></div>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="3" tab="实训课时统计" force-render>
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container2"></div>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="4" tab="实训室设备使用统计" force-render>
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container3"></div>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="5" tab="实训室耗材使用统计" force-render>
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container4"></div>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="6" tab="xxxxxx" force-render>
                <a-row>
                  <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                    <div id="container5"></div>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
import {Chart} from "@antv/g2";
import {onMounted, toRaw,ref, reactive,onUnmounted, computed} from "vue";
import {useStore} from 'vuex';
// 引入跑马灯组件
import marquee from "@/view/component/marquee.vue";
// 图片跑马灯
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
import {circulation} from "@/api/module/announce";
import {homeImg} from "@/api/module/resource";
import {loginChat} from "@/api/module/statistics";

export default {
  components: {
    marquee,
    LeftCircleOutlined,
    RightCircleOutlined,
  },
  setup() {
    const loginChats = ref(1500);
    const registerCount = ref(1500);
    const trainingClass = ref(1500);
    const visitCount = ref(1500);
    const statisticsVOS_side = ref([]);
    const statisticsVOS = ref([]);


    const chartRef = ref(null);
    const chartRef1 = ref(null);
    const chartRef2 = ref(null);
    const chartRef3 = ref(null);
    const chartRef4 = ref(null);
    const chartRef5 = ref(null);
    let lists = reactive([]);
    const store = useStore()
    const bannerList = ref([])
    const state = reactive({
      loginChat: '',
      registerCount: '',
      trainingClass: '',
      visitCount: '',
      statisticsVOS: [],
    })
    const color = computed(() => store.getters.color);

    onMounted(async () => {
     await loginChat({}).then((response) => {
        loginChats.value = response.data.loginChat
        statisticsVOS.value = response.data.statisticsVOS
        registerCount.value = response.data.registerCount
        visitCount.value = response.data.visitCount
        trainingClass.value = response.data.trainingClass
       statisticsVOS_side.value = response.data.statisticsVOS_side
      })

      const datass = [
        {name: "1951 年", count: 1},
        {name: "1952 年", count: 2},
        {name: "1956 年", count: 3},
        {name: "1957 年", count: 4},
        {name: "1958 年", count: 5},
        {name: "1959 年", count: 6},
        {name: "1960 年", count: 7},
        {name: "1961 年", count: 8},
        {name: "1962 年", count: 9},
        {name: "1963 年", count: 10},
        {name: "1964 年", count: 11},
        {name: "1965 年", count: 12},
        {name: "1966 年", count: 13},
        {name: "1967 年", count: 14},
      ];
      const chart = new Chart({
        container: "container",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef.value = chart;
      chart.data(toRaw(statisticsVOS.value));
      chart.scale("count", {
        nice: true
      });
      chart.axis("count", false);
      chart
        .interval()
        .position("name*count")
        .color("name*count", function (name, count) {
          return color.value;
        });
      chart.interaction("active-region");
      chart.render();
      const e = document.createEvent("Event");
      e.initEvent("resize", true, true);
      window.dispatchEvent(e);
      //--------------------------------------------------------
      const datass1 = [
        {year: "1959 年", sales: 70},
        {year: "1960 年", sales: 60},
        {year: "1961 年", sales: 55},
        {year: "1962 年", sales: 38},
        {year: "1963 年", sales: 38},
        {year: "1964 年", sales: 38},
        {year: "1965 年", sales: 38},
        {year: "1966 年", sales: 38},
        {year: "1967 年", sales: 38},
      ];
      const chart1 = new Chart({
        container: "container1",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef1.value = chart1;
      chart1.data(datass1);
      chart1.scale("sales", {
        nice: true
      });
      chart1.axis("sales", false);
      chart1
        .interval()
        .position("year*sales")
        .color("year*sales", function (year, sales) {
          return color.value;
        });
      chart1.interaction("active-region");
      chart1.render();
      const e1 = document.createEvent("Event");
      e1.initEvent("resize", true, true);
      window.dispatchEvent(e1);
      //--------------------------------------------------------
      const datass2 = [
        {year: "1957 年", sales: 135},
        {year: "1958 年", sales: 80},
        {year: "1959 年", sales: 70},
        {year: "1960 年", sales: 60},
        {year: "1961 年", sales: 55},
        {year: "1962 年", sales: 38},
        {year: "1963 年", sales: 38},
        {year: "1964 年", sales: 38},
        {year: "1965 年", sales: 38},
        {year: "1966 年", sales: 38},
        {year: "1967 年", sales: 38},
      ];
      const chart2 = new Chart({
        container: "container2",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef2.value = chart2;
      chart2.data(datass2);
      chart2.scale("sales", {
        nice: true
      });
      chart2.axis("sales", false);
      chart2
        .interval()
        .position("year*sales")
        .color("year*sales", function (year, sales) {
          return color.value;
        });
      chart2.interaction("active-region");
      chart2.render();
      const e2 = document.createEvent("Event");
      e2.initEvent("resize", true, true);
      window.dispatchEvent(e2);
      //--------------------------------------------------------
      const datass3 = [
        {year: "1957 年", sales: 135},
        {year: "1958 年", sales: 80},
        {year: "1959 年", sales: 70},
        {year: "1960 年", sales: 60},
        {year: "1961 年", sales: 55},
        {year: "1962 年", sales: 38},
        {year: "1963 年", sales: 38},
        {year: "1964 年", sales: 38},
        {year: "1965 年", sales: 38},
        {year: "1966 年", sales: 38},
        {year: "1967 年", sales: 38},
      ];
      const chart3 = new Chart({
        container: "container3",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef3.value = chart3;
      chart3.data(datass3);
      chart3.scale("sales", {
        nice: true
      });
      chart3.axis("sales", false);
      chart3
        .interval()
        .position("year*sales")
        .color("year*sales", function (year, sales) {
          return color.value;
        });
      chart3.interaction("active-region");
      chart3.render();
      const e3 = document.createEvent("Event");
      e3.initEvent("resize", true, true);
      window.dispatchEvent(e3);
      //--------------------------------------------------------
      const datass4 = [
        {year: "1956 年", sales: 80},
        {year: "1957 年", sales: 135},
        {year: "1958 年", sales: 80},
        {year: "1959 年", sales: 70},
        {year: "1960 年", sales: 60},
        {year: "1961 年", sales: 55},
        {year: "1962 年", sales: 38},
        {year: "1963 年", sales: 38},
        {year: "1964 年", sales: 38},
        {year: "1965 年", sales: 38},
        {year: "1966 年", sales: 38},
        {year: "1967 年", sales: 38},
      ];
      const chart4 = new Chart({
        container: "container4",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef4.value = chart4;
      chart4.data(datass4);
      chart4.scale("sales", {
        nice: true
      });
      chart4.axis("sales", false);
      chart4
        .interval()
        .position("year*sales")
        .color("year*sales", function (year, sales) {
          return color.value;
        });
      chart4.interaction("active-region");
      chart4.render();
      const e4 = document.createEvent("Event");
      e4.initEvent("resize", true, true);
      window.dispatchEvent(e4);
      //--------------------------------------------------------
      const datass5 = [
        {year: "1952 年", sales: 52},
        {year: "1956 年", sales: 80},
        {year: "1957 年", sales: 135},
        {year: "1958 年", sales: 80},
        {year: "1959 年", sales: 70},
        {year: "1960 年", sales: 60},
        {year: "1961 年", sales: 55},
        {year: "1962 年", sales: 38},
        {year: "1963 年", sales: 38},
        {year: "1964 年", sales: 38},
        {year: "1965 年", sales: 38},
        {year: "1966 年", sales: 38},
        {year: "1967 年", sales: 38},
      ];
      const chart5 = new Chart({
        container: "container5",
        autoFit: true,
        forceFit: true,
        height: 320
      });
      chartRef5.value = chart5;
      chart5.data(datass5);
      chart5.scale("sales", {
        nice: true
      });
      chart5.axis("sales", false);
      chart5
        .interval()
        .position("year*sales")
        .color("year*sales", function (year, sales) {
          return color.value;
        });
      chart5.interaction("active-region");
      chart5.render();
      const e5 = document.createEvent("Event");
      e5.initEvent("resize", true, true);
      window.dispatchEvent(e5);
    });
    onUnmounted(() => {
      chartRef5.value && chartRef5.value.destroy();
      chartRef4.value && chartRef4.value.destroy();
      chartRef3.value && chartRef3.value.destroy();
      chartRef2.value && chartRef2.value.destroy();
      chartRef1.value && chartRef1.value.destroy();
      chartRef.value && chartRef.value.destroy();
    });


    const columns = [
      {title: "排名", dataIndex: "key", key: "key"},
      {title: "门店", dataIndex: "name", key: "name"},
      {title: "销量", dataIndex: "age", key: "age"},
      {title: "地址", dataIndex: "address", key: "address"}
    ];

    const datas = [
      {
        key: 1,
        name: "1 号店",
        age: 13323.34,
        address: "北京市朝阳区凤鸣路 112 号."
      },
      {
        key: 2,
        name: "2 号店",
        age: 35432.41,
        address: "北京市朝阳区凤鸣路 112 号."
      },
      {
        key: 3,
        name: "3 号店",
        age: 47452.44,
        address: "北京市朝阳区凤鸣路 112 号."
      },
      {
        key: 4,
        name: "4 号店",
        age: 32352.44,
        address: "北京市朝阳区凤鸣路 112 号."
      },
      {
        key: 5,
        name: "5 号店",
        age: 32352.44,
        address: "北京市朝阳区凤鸣路 112 号."
      },
      {
        key: 6,
        name: "6 号店",
        age: 32352.44,
        address: "北京市朝阳区凤鸣路 112 号."
      }
    ];

    // 按钮点击
    const buttonClick = (value) => {
      console.log("-------------",value)
      if(value == 0){
        alert("--")
      }
    }
    // 轮播图文字
    const getCirculation = () => {
      circulation({}).then((response)=>{
        lists = response.data;
        state.depts = response.data;
      })
    }
    // 页面轮播图
    const getImgDate = () => {
      homeImg({}).then((response) => {
        bannerList.value = response.data
      })
    }
    // 获取统计数据
    const getStatistics  = () => {
      // 登录人数
      loginChat({}).then((response) => {
        console.log("统计：",response)
        loginChats.value = response.data.loginChat
        statisticsVOS.value = response.data.statisticsVOS
        registerCount.value = response.data.registerCount
        visitCount.value = response.data.visitCount
        trainingClass.value = response.data.trainingClass
        console.log("登陆人数：",state.loginChat)
      })
    }
    getImgDate()
    getCirculation()
    // getStatistics()
    return {
      columns,
      datas,
      lists,
      state,
      bannerList,
      buttonClick,
      loginChats,
      statisticsVOS,
      registerCount,
      visitCount,
      trainingClass,
      statisticsVOS_side,
      color
    };
  }
};
</script>
<style lang="less" scoped>
.ant-divider-horizontal {
  margin-bottom: 10px !important;
}

.card-left {
  display: inline;
}

.card-right {
  float: right;
}

/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}

.imgCssClass {
  width: 100%;
  height: 500px;
}


// 图片跑马灯所需样式
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 500px;
  overflow: hidden;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  z-index: 1;
}

.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}

.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
</style>
